<template>
  <div class="admin">
    <el-container>
      <el-aside width="200">
        <adminHeader></adminHeader>
      </el-aside>
      <el-main>
        <el-page-header content="公告管理"></el-page-header>
        <div style="display: flex;margin-top: 15px">
          <div style="width: 60%;height: 500px;overflow-x: hidden;padding-top: 15px;height:520px">
            <el-timeline :reverse="true">
              <el-timeline-item v-for="(item, index) in news" :key="index" :timestamp="item.news_time" >
                <el-card>
                  <div slot="header">
                    <span>{{item.news_title}}</span>
                  </div>
                  <div>
                    {{item.news_content}}
                  </div>
                  <div>In:{{item.news_year}}</div>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </div>
          <div style="width:30%;text-align: center" >
          <el-button type="primary" @click="toEdit"
          >发布公告</el-button
          >
        </div>
        </div>

      </el-main>
      <el-dialog :visible.sync="edit" title="新增公告">
        <el-form ref="form" title="发布公告" :model="form" label-position="top" label-width="80px" size="small" :rules="formRules">
          <el-form-item label="时间">
            <el-date-picker
              v-model="form.news_time"
              type="date"
              placeholder="选择日期"
              disabled
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="标题" prop="news_title">
            <el-input v-model="form.news_title" placeholder="请输入公告标题"></el-input>
          </el-form-item>
          <el-form-item label="内容" prop="news_content">
            <el-input
              v-model="form.news_content"
              type="textarea"
              autosize
              placeholder="请输入公告内容">
            </el-input>
          </el-form-item>
          <el-form-item align="center">
            <el-button type="primary" @click="submit('form')">确认发布</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-container>
  </div>
</template>

<script>
import adminHeader from "../../components/adminHeader";
export default {
  components:{adminHeader},
  data(){
    return {
      news: [],
      edit: false,
      form: {},
      formRules: {
        news_title: [{required: true, trigger: true,message:'请输入公告标题'}],
        news_content: [{required: true, trigger: true,message:'请输入公告内容'}]
      }
    }
  },
  mounted() {
    this.getTime();
    this.getNews();
  },
  methods:{
    getNews(){
      this.axios.get('/api/getNews').then(res=>{
        console.log(res);
        this.news = res.data
      }).catch(err=>{
        console.log(err)
      })
    },
    toEdit(){
      this.edit = true
    },
    getTime(){
      this.form.news_time = new Date();
    },
    submit(form){
      var moment = require('moment')
      this.$refs[form].validate(v=>{
        if (v){
          console.log(this.form);
          this.axios.post('/api/admin/announcement',{
            news_year:moment(Date.parse(new Date())).format('YYYY'),
            news_time:moment(Date.parse(new Date())).format('MM-DD'),
            news_title:this.form.news_title,
            news_content:this.form.news_content
          }).then(res=>{
            console.log(res);
            this.edit = false;
            this.getNews();
          }).catch(err=>{
            console.log(err)
          })
        }else {
          console.log(111)
        }
      })
    }
  }
}
</script>

<style scoped>
/deep/ .el-main {
  margin-top: 10px;
}
</style>
